<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<div>
				<label>
					Id:
					<input type="text" v-model="id" />
				</label>

				<label>
					Name:
					<input type="text" v-model="name" />
				</label>

				<input type="button" value="添加" @click="add" />
			</div>

			<p v-for="(item, index) in list" :key="index">
				<input type="checkbox" />{{ item.id }} --- {{ item.name }}
			</p>
		</div>

		<script src="/scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					name: '',
					list: [
						{ id: 1, name: 'zs', age: 20 },
						{ id: 2, name: 'ls', age: 23 },
						{ id: 3, name: 'ww', age: 18 },
						{ id: 4, name: 'zl', age: 26 },
						{ id: 5, name: 'qq', age: 19 },
					],
				},
				methods: {
					add: function () {
						this.list.unshift({ id: this.id, name: this.name })
					},
				},
			})
		</script>
	</body>
</html>
